<template>
  <div class="content">
    <NavBar>
      <template slot="content">
        <div>设置</div>
      </template>
    </NavBar>
    <div class="card">
      <van-cell is-link @click="showPopup" title="手机号" :value="phone" />
      <van-action-sheet v-model="show" title="修改手机号码" :closeable="false">
        <div class="box">
          <div class="line"></div>
          <div class="current">您当前绑定的手机号:{{ phone }}</div>
          <div class="line"></div>
          <div class="changeButton" @click="changeshowNumber">
            更换绑定手机号
          </div>
        </div>
      </van-action-sheet>
      <van-action-sheet
        v-model="showNumber"
        title="请输入短信校验码"
        :closeable="false"
        class="number"
      >
        <div class="check">
          <!-- <van-password-input
            :value="value"
            :length="4"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
            :mask="false"
            gutter="20px"
            class="border"
          />
          <van-number-keyboard
            v-model="value"
            :show="showKeyboard"
            @blur="showKeyboard = false"
          />
          <van-form class="form">
            <van-field
              v-model="valOne"
              class="field"
              maxlength="1"
              autofocus
              @change="changeValue"
            ></van-field>
            <van-field
              v-model="valTwo"
              class="field"
              maxlength="1"
              ref="input22"
            ></van-field>
            <van-field
              v-model="valThree"
              class="field"
              maxlength="1"
            ></van-field>
            <van-field
              v-model="valFour"
              class="field"
              maxlength="1"
            ></van-field>
          </van-form> -->
          <Input v-model="mesVal"></Input>
          <van-button
            class="enter"
            @click="getoldValidation"
            :disabled="disabled"
            v-show="showSend"
          >
            发送
          </van-button>
          <div class="refresh">
            <p
              ref="nana"
              @click="hundleAgain"
              :class="timeShow ? 'active' : 'activeTwo'"
              v-show="againShow"
            >
              重新获取验证码
            </p>
            <!-- <van-count-down
              class="miao"
              ref="countDown"
              :time="time"
              :auto-start="true"
              format="ss"
              @finish="changeVal"
            /> -->
            <p class="miao" v-show="timeShow">({{ time }}s)</p>
          </div>
          <div class="error">无法收到短信验证码请联系客服协助</div>
        </div>
      </van-action-sheet>
    </div>
    <div class="card">
      <van-cell
        is-link
        title="修改密码"
        @click="$router.push({ path: '/password' })"
      />
    </div>
    <div class="card">
      <van-cell
        is-link
        title="账户注销"
        @click="canelUser"
      >
      </van-cell>
    </div>
    <!-- <div class="card">
      <van-cell
        is-link
        title="账户注销"
        @click="$router.push({ path: '/cancellation' })"
      />
    </div> -->
    <div class="button">
      <!-- <van-button class="change" @click="changeLogin">切换账号</van-button> -->
      <van-button class="exitLogin" @click="exitLogin">退出登录</van-button>
    </div>
  </div>
</template>
<script>
import API from '@/services/h5/my'
import NavBar from '@/components/h5header'
import { Dialog } from 'vant'
import { configs, env, isWeChatBrowser } from '@/config/h5/index.js'
import Input from './compontent/index.vue'
import { removeAuthorization } from '@/utils/request'
import { Notify } from 'vant'
export default {
  components: { NavBar, Input },
  data() {
    return {
      show: false,
      showNumber: false,
      value: '',
      showKeyboard: true,
      appType: '02',
      valOne: '',
      valTwo: '',
      valThree: '',
      valFour: '',
      mesVal: null,
      disabled: false,
      phone: '',
      time: 60,
      timeShow: false,
      timerOut: null,
      showSend: true,
      againShow: false,
      msg: '',
      dialogShow:false,
      dialogMessage:"注销后我们将删除您的所有个人账户信息，并且无法恢复，但是出于监管要求，您名下的保单相关数据我们将继续保存。如果确认注销，请点击确认。"
    }
  },
  watch: {
    //监听验证码输入框的值
    //检验变更前手机号验证码
    mesVal(val) {
      if (val != '' && val.length == 4 && this.time !== 0) {
        let params = {
          validateCode: this.mesVal
        }
        API.checkoldValidation(params).then(res => {
          if (res.data && res.data.code === 1000) {
            this.$router.push({ path: '/phone' })
          }
          if (res.data && res.data.code === 2008) {
            this.msg = res.data.data
            Notify({ type: 'danger', message: this.msg })
          }
        })
      }
    },
    //监听倒计时的值
    time(val) {
      if (val === 0) {
        this.timeShow = false
        this.showSend = false
        // this.$refs.nana.style.color = '#38a3ff'
      } else {
        // this.$refs.nana.style.color = '#38a3ff'
      }
    }
  },
  methods: {
    onClickLeft() {
      window.history.go(-1)
    },
    //倒计时
    timer() {
      if (this.time > 0) {
        this.time--
        this.timerOut = setTimeout(this.timer, 1000)
      } else {
        this.time = 0
      }
    },
    //底部弹出层
    showPopup() {
      this.show = true
    },
    changeshowNumber() {
      this.show = false
      this.showNumber = true
    },
    //获取变更前手机号的验证码
    getoldValidation() {
      // console.log('ssssss', this.time)
      // clearTimeout(this.timerOut)
      // this.timerOut = null
      this.againShow = true
      this.showSend = false
      this.timeShow = true
      if (this.time == 60) {
        API.getoldValidation().then(res => {
          if (res.data && res.data.code === 1000) {
            this.timer()
          }
        })
      }
    },
    //校验变更前手机号的验证码
    // hundleJump() {
    //   let params = {
    //     validateCode: this.mesVal
    //   }
    //   API.checkoldValidation(params).then(res => {
    //     if (res.data && res.data.code === 1000) {
    //       this.$router.push({ path: '/phone' })
    //     }
    //   })
    // },
    //重新获取验证码
    hundleAgain() {
      if (this.time == 0) {
        this.time = 60
        this.timeShow = true
        API.getoldValidation().then(res => {
          if (res.data && res.data.code === 1000) {
            this.timer()
          }
        })
      }
    },
    //注销账户 
    canelUser() {
      // let that = this
      this.$dialog
        .confirm({
          title: '提示',
          message: `您是否要注销${this.phone}这个账户`
        })
        .then(() => {
          this.dialogShow = true
          this.cancelUserInfo()
        })
        .catch(() => {})
    },
    cancelUserInfo() {
      let that = this
      this.$dialog.confirm({
        title: '提示',
        message: "注销后我们将删除您的所有个人账户信息，并且无法恢复，但是出于监管要求，您名下的保单相关数据我们将继续保存。如果确认注销，请点击确认。"
      }).then(async() => {
        let res = await API.userCancel()
        console.log("res返回值：",res)
        if(res.data.code === 1000) {
          that.$message.success('您的账户已注销成功')
          localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY)
          localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY)
          localStorage.removeItem(process.env.VUE_APP_ROLES_KEY)
          localStorage.removeItem('unloginKey')
          localStorage.removeItem('loginKey')
          localStorage.removeItem('refreshToken')
          localStorage.removeItem('successBack')
          localStorage.removeItem('admin.user')
          sessionStorage.clear()
          removeAuthorization()
          that.$router.push({ path: '/home' })
        }
      }).catch(() => {
        console.log('取消2')
      })
    },
    //退出登录
    exitLogin() {
      Dialog.confirm({
        message: '是否确认退出?'
      })
        .then(async () => {
          let res = await API.exitLogin()
          if (res.data && res.data.code === 1000) {
            localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY)
            localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY)
            localStorage.removeItem(process.env.VUE_APP_ROLES_KEY)
            localStorage.removeItem('unloginKey')
            localStorage.removeItem('loginKey')
            localStorage.removeItem('refreshToken')
            localStorage.removeItem('successBack')
            localStorage.removeItem('admin.user')
            sessionStorage.clear()
            removeAuthorization()
            if (isWeChatBrowser) {
              window.location.href = configs[env].wxlogoutUrl
            } else {
              this.$router.push({ path: '/home' })
            }
            // this.$router.push({ path: '/home' })
          }
        })
        .catch(() => {})
    },
    //切换账号
    changeLogin() {
      this.$router.push({ path: '/login' })
      // if (isWeChatBrowser) {
      //   window.location.href = configs[env].wxlogoutUrl
      // } else {
      //   this.$router.push({ path: '/login' })
      // }
    },
    // changeVal() {
    //   this.disabled = true
    //   this.$refs.nana.style.color = '#38a3ff'
    // },
    //
    //获取手机号
    getPersonal() {
      API.personal().then(res => {
        if (res.data && res.data.code === 1000) {
          this.phone = res.data.data.mobile
        }
      })
    }
  },
  mounted() {
    this.getPersonal()
  }
}
</script>
<style scoped lang="less">
/deep/.van-password-input__security li {
  border: 0.5px solid #ccc;
}
/deep/ .van-dialog {
  .van-dialog__header {
    width: 90% !important;
    margin: 0 auto;
  }
}
.content {
  background: #f0f0f0;
  height: calc(100vh);
  position: relative;
  border: 1px solid transparent;
  box-sizing: border-box;
  .card {
    margin-top: 13px;
    .box {
      width: 375px;
      height: 105px;
      background-color: #fff;
      .line {
        width: 345px;
        height: 0.5px;
        background-color: #e9e9e9;
        margin: 0 auto;
      }
      .current {
        height: 50px;
        line-height: 50px;
        font-size: 15px;
        color: #666;
        text-align: center;
      }
      .changeButton {
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        color: @c-color-primary;
        text-align: center;
      }
    }
    .check {
      width: 375px;
      .border {
        padding-top: 30px;
        width: 275px;
        margin: 0 auto;
      }
      .enter {
        display: inline;
        height: 15px;
        position: absolute;
        top: 15px;
        right: 15px;
        color: #f68c5f;
        font-size: 14px;
        border: none;
      }
      .refresh {
        line-height: 35px;
        font-size: 14px;
        text-align: center;
        margin-top: 30px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .miao {
          line-height: 35px;
          color: #666;
        }
        .active {
          color: #666;
        }
        .activeTwo {
          color: #38a3ff;
        }
      }
      .form {
        display: flex;
        justify-content: space-evenly;
        margin: 20px 15px;
        .field {
          width: 44px;
          height: 44px;
          border: 0.5px solid #ccc;
        }
      }
      .error {
        height: 35px;
        line-height: 35px;
        font-size: 13px;
        color: #f3bba4;
        text-align: center;
        margin-bottom: 20px;
      }
    }
  }
  .button {
    .change {
      width: 345px;
      height: 50px;
      background-color: @c-color-primary;
      color: #fff;
      font-size: 17px;
      border-radius: 4.5px;
      position: absolute;
      bottom: 85px;
      left: 15px;
    }
    .exitLogin {
      width: 345px;
      height: 50px;
      color: @c-color-primary;
      font-size: 17px;
      border-radius: 4.5px;
      position: absolute;
      bottom: 20px;
      left: 15px;
    }
  }
}
</style>
